<template>
    <div class="main">
        <!-- <canvas class="canvas_add"></canvas> -->
        <div class="login">
            <!-- <h4 class="title">Boss系统</h4> -->
            <div class="userType">
                用户登录
            </div>
            <el-form size='small' :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
                <el-form-item label="账号" prop="loginId">
                    <el-input type="text" v-model="ruleForm.loginId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="loginPwd">
                    <el-input @keydown.native.enter.stop='loginPwdEnter' type="password" v-model="ruleForm.loginPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                <div class="re_pwd">
                    <el-checkbox style="margin-left: 10px" v-model="ruleForm.checked">记住我</el-checkbox>
                    <router-link style="font-size: 10px" to="/findPwd">忘记了密码？</router-link>
                </div>
            </el-form>
            
        </div>
    </div>
</template>
<style lang="scss" scoped> 
    .main { 
        background-color:rgb(243, 243, 243);
        background-image: url("../../../public/index.jpg");
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
     /* .canvas_add{
         width: 100%; 
         height: 100%;
     }
     .canvas {
        // position: absolute;   被注释
         width: 100%; 
         height: 100%;
         user-select: none;
         background: #000;
         cursor: pointer;
     }       */
    .login {
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 400px;
        height: 500px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 20px;
        margin-left: 60%;
    }
    .title{
        font-size: 18px;
        color: white;
        text-align: center;      
    }
    .re_pwd{
        display: flex;
        justify-content:space-between;
        align-items:center;
    }
    .userType{
        display: flex;
        flex-direction: row;
        margin-bottom: 80px;   
        font-size: 25px;
    }
    </style> 





<script lang="ts">
import {strToMd5} from '../../utils/md5.js'
// ../../../assets/js/login.js
export default {
    mounted () {
        // start()
        let loginId = localStorage.getItem('loginId')
        if(loginId){
            this.ruleForm.loginId = loginId
        }
    },
    data() {
        var validateLoginId = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        var validateLoginPwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            // 表单数据
            ruleForm: {
                // 登录名
                loginId: '',
                // 登录密码
                loginPwd: '',
                checked: false
            },
            // 表单验证数据
            rules: {
                // 验证密码
                loginId: [
                    // 失去光标触发函数
                    { validator: validateLoginId, trigger: 'blur' }
                ],
                // 验证密码
                loginPwd: [
                    { validator: validateLoginPwd, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        loginPwdEnter(){
            this.submitForm('ruleForm')
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
            if (valid) {
                //登录
                //对密码进行md5加密
                // this.ruleForm.loginPwd = strToMd5(this.ruleForm.loginPwd)
                // // //发起请求    模拟
                // console.log("发起请求.....");
                // let res = await this.$get('/user/login',this.ruleForm)
                // console.log(res); 
                // if(res.data===""){
                //     this.$con_firm("用户名或者密码错误")
                // }else{
                //     console.log(res.data)
                //     this.$store.commit('setUser',res.data)
                //     console.log(this.$store.state.userInfo)
                //     if(this.ruleForm.checked){
                //         localStorage.setItem('loginId',this.ruleForm.loginId)
                //         localStorage.setItem('loginPwd',this.ruleForm.loginPwd)
                //     }else{
                //         localStorage.setItem('loginId',this.ruleForm.loginId)
                //     }
                //     this.$router.push('/')
                // }


                // //自定义后端返回res.success=true 1
                // if(res.success){
                //     //服务器会返回一个token（令牌） 这个token里面保存的就是你的身份信息  先防御权限
                //     //所以 需要保存该token信息 通常会保存在浏览器的缓存中
                //     //浏览器缓存有两种  localStorage:一直在 sessionStorage：随浏览器关闭而清空
                //     sessionStorage.setItem('token',res.token)
                //     //二次请求就会将token带过去  权限够就拿数据
                //     this.$setToken()
                    //如果点了记住我就将密码缓存
                    
                //     console.log(11111);
                //     this.$router.push('/layout')
                // }else {
                //     this.$msg_e(res.message)
                //     return false;
                // }



                this.$store.commit('setUser',{money:60,score:80})
                if(this.ruleForm.loginPwd==="111"){
                    this.$router.push('/layout')
                }else{
                    this.$router.push('/')
                }
                
                
                
            } 
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
        }
}
</script>
